<template>
	<view>
		<view v-if="list.length!=0">
			<view class="charBox" v-for="(item,index) in list" @click="goChat(item)">
				<view class="left">
					<image :src="item.avatar" class="avatar">
					</image>
				</view>
				<view class="right">
					<view class="title">
						<text class="textOne">{{item.title}}</text>
						<text class="textTwo">{{item.time}}</text>
					</view>
					<view class="content">						
						<rich-text v-html="getContent(item.content)"></rich-text>
					</view>
					<view class="divider">
					</view>
				</view>
			</view>
			<u-empty mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png" text="再往下也没有更多了~">
			</u-empty>
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您的聊天列表空空如也~"
			v-if="list.length==0">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgApi: "",
				list: []
			}
		},
		onLoad() {
			this.token = uni.getStorageSync("merchantsToken").token
			this.getList()
		},
		methods: {
			getList() {
				this.$axios({
					url: 'us/merchantOperation/msgList',
					method: "post",
					header: {
						"Authorization": this.token,
					},
				}).then((res) => {
					this.list = res.result				
				})
			},
			goChat(item) {
				console.log('item', item)
				let id = item.type == "user" ? item.sendId : item.id
				let sendId = item.type == "user" ? item.id : item.sendId
				uni.navigateTo({
					url: "../../pageA/HM-chat/Merchant-Chat?id=" + id + "&sendid=" + sendId + "&title=" + item
						.title + "&avatar=" + item.avatar
					// url: "../../pageA/HM-chat/HM-chat?id="
				})
			},
			getContent(content) {
				console.log("content", content)
				return content
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.charBox {
		display: flex;
		padding: 20rpx;
		height: 100rpx;
		justify-content: end;
		background-color: #ffffff;

		.divider {
			// width: 100%;			
			background-color: #efefef;
			right: 0rpx;
			width: 750rpx;
			height: 2rpx;
			bottom: 10rpx;
		}

		.right {
			width: 80%;
			margin: 0rpx 30rpx 0rpx 30rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.textOne {
					font-weight: 600;
					letter-spacing: 3rpx;
				}

				.textTwo {
					// width: 10rpx;
					font-size: 20rpx;
					color: #6c6c6c;

				}
			}

			.content {
				// font-size: 10rpx;
				width: 550rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 27rpx;
				color: #6c6c6c;
				font-weight: 500;
				letter-spacing: 3rpx;
				margin: 15rpx 0rpx 20rpx 0rpx;
			}

		}

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.avatar {
			border-radius: 50%;

		}
	}
</style>
